<template>
	<view>
		<view class="card choose-address">
			<view class="flex flex-col py-20">
				<view class="mb-10"><text class="font-size-32 bold">提货地址:</text></view>
				<view class="flex flex-row items-center">
					<view class="flex flex-col e-flex-1">
						<text>{{info.receivingAddr}}</text>
						<view class="gray-1">
							<text>{{info.receivingName}}</text>
							<text>{{info.receivingPhone}}</text>
						</view>
					</view>
					<!-- <view class="u-margin-left-10 right-arrow" :style="{borderColor: '#999'}"></view> -->
				</view>
			</view>
		</view>


		<view class="card py-20">
			<view class="">
				<view class="goods-item flex flex-row">
					<image :src="$fullLink(info.commondityUrl)" class="cover" mode=""></image>
					<view class="flex-1 ml-20 mr-20">
						<view>
							<text class="font-size-32">{{info.commondityName}}</text>
						</view>
					</view>
					<text class="gray-1">x{{info.qty}}</text>
				</view>
			</view>
			
			<view class="w-line my-20"></view>
			
			<view class="numbers mt-20 flex flex-row items-center">
				<view class="flex-1">
					
				</view>
				<view class="flex flex-row items-center">
					<text>提货数量</text>
					<text class="font-size-36 bold ml-10">x{{info.qty}}</text>
				</view>
			</view>
		</view>

		<view class="card pb-20">
			<view class="mb-10 py-20"><text class="font-size-32 bold">提货信息</text></view>
			<view class="w-line"></view>
			<view class="pt-20">
				<view class="cell">
					<view class="cell-item">
						<text class="label gray-1">提货编号</text>
						<view class="flex flex-row items-center">
							<text>{{info.paycode}}</text>
							<button class="reset-button" @click="copy(info.paycode)">
								<image src="/static/h5/copy.png" class="icon-36 ml-10" mode=""></image>
							</button>
						</view>
					</view>
					<view class="cell-item">
						<text class="label gray-1">提货时间</text>
						<view>
							<text>{{info.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { pickupOrderDeliveryDetail } from '../../common/request/api/yuncang';
	export default {
		data() {
			return {
				address: {},
				num: 1,
				paycode:"",
				info:{}
			};
		},
		onLoad({paycode}) {
			this.paycode = paycode || ""
			this.getData()
		},
		methods: {
			getData(){
				pickupOrderDeliveryDetail(this.paycode).then(res=>{
					this.info = res.data || {}
				})
			},
			reduceNum(){
				if(this.num<=1)return
				this.num --;
			},
			plusNum(){
				this.num ++;
			},
			copy(text){
				uni.setClipboardData({
					data:text
				})
			}
		}
	}
</script>

<style lang="scss">
	.right-arrow {
		border: 4rpx solid;
		width: 16rpx;
		height: 16rpx;
		border-left: none;
		border-bottom: none;
		transform: rotate(45deg);
	}

	.number-input {
		border: 1rpx solid #999;
		height: 1.4rem;
		border-radius: 8rpx;

		.left,
		.right {
			display: block;
			width: 48rpx;
			height: 42rpx;
			line-height: 40rpx;
			font-size: 40rpx;
			box-sizing: border-box;
		}

		.left {
			border: 0rpx solid #999 !important;
			border-right: 1rpx !important;
		}

		.right {
			border: 0rpx solid #999;
			border-left: 1rpx;
		}
	}
	
	.goods-item{
		.cover{
			width: 196rpx;
			height: 196rpx;
			background-color: #f3f3f3;
		}
	}
	
	.cell{
		.cell-item{
			line-height: 54rpx;
			min-height: 54rpx;
		}
	}
</style>